<template>
  <div class="learning-center">
    <header>
      <h1>职为你来 - 学习中心</h1>
      <button @click="toggleLogin" class="login-button">
        {{ isLoggedIn ? '退出登录' : '登录' }}
      </button>
    </header>
    <main>
      <div class="content-wrapper">
        <div class="course-list">
          <h2>{{ isLoggedIn ? '我的课程' : '热门内容' }}</h2>
          <div class="grid-layout">
            <div
              v-for="item in displayedItems"
              :key="item.id"
              class="grid-item"
              @click="navigateTo(`/course/${item.id}`)"
            >
              <div class="item-info">
                <h3>{{ item.title }}</h3>
                <p>{{ item.category }}</p>
              </div>
              <div
                v-if="isLoggedIn && item.progress !== undefined"
                class="course-progress"
              >
                <div class="progress-bar">
                  <div
                    class="progress"
                    :style="{ width: `${item.progress}%` }"
                  ></div>
                </div>
                <span>{{ item.progress }}% 完成</span>
              </div>
            </div>
          </div>
        </div>
        <div class="learning-progress" v-if="isLoggedIn">
          <h2>学习进度</h2>
          <div class="progress-info">
            <p>已完成课程</p>
            <p class="progress-number">
              {{ userProgress.completedCourses }} /
              {{ userProgress.totalCourses }}
            </p>
          </div>
          <div class="progress-info">
            <p>平均完成度</p>
            <div class="average-progress">
              <div class="progress-bar">
                <div
                  class="progress"
                  :style="{ width: `${userProgress.averageProgress}%` }"
                ></div>
              </div>
              <span>{{ userProgress.averageProgress }}%</span>
            </div>
          </div>
        </div>
      </div>
      <div class="recommended-courses">
        <h2>推荐课程</h2>
        <div class="course-grid">
          <div
            v-for="course in recommendedCourses"
            :key="course.id"
            class="recommended-course"
            @click="navigateTo(`/course/${course.id}`)"
          >
            <h3>{{ course.title }}</h3>
            <p>{{ course.category }}</p>
          </div>
        </div>
      </div>
      <div
        class="coding-problems-entry"
        @click="navigateTo('/coding-problems')"
      >
        <h2>编程题库</h2>
        <p>点击进入题库</p>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const isLoggedIn = ref(false)
const courses = ref([
  { id: 1, title: '简历写作技巧', category: '求职准备', progress: 0 },
  { id: 2, title: '面试技巧与常见问题', category: '求职准备', progress: 30 },
  { id: 3, title: 'LinkedIn profile优化', category: '职业发展', progress: 60 },
  { id: 4, title: '职场沟通技巧', category: '职场技能', progress: 10 },
  { id: 5, title: '时间管理与效率提升', category: '职场技能', progress: 80 }
])

const publicContent = ref([
  { id: 101, title: '求职热门话题', category: '题库' },
  { id: 102, title: '行业趋势分析', category: '资讯' },
  { id: 103, title: '职场礼仪入门', category: '课程' },
  { id: 104, title: '编程语言排行榜', category: '资讯' },
  { id: 105, title: '简历常见错误', category: '题库' },
  { id: 106, title: '面试常见问题', category: '题库' }
])

const recommendedCourses = ref([
  { id: 6, title: '领导力培训', category: '管理技能' },
  { id: 7, title: '数据分析入门', category: '技术技能' },
  { id: 8, title: '项目管理基础', category: '管理技能' }
])

const userProgress = ref({
  completedCourses: 2,
  totalCourses: courses.value.length,
  averageProgress: 36
})

const displayedItems = computed(() => {
  return isLoggedIn.value ? courses.value : publicContent.value
})

const toggleLogin = () => {
  isLoggedIn.value = !isLoggedIn.value
}

const navigateTo = (path) => {
  router.push(path)
}
</script>

<style scoped>
.learning-center {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  color: #333;
  background-color: #ffffff;
}

header {
  background-color: #1e90ff;
  color: white;
  padding: 20px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
}

h1,
h2,
h3 {
  margin: 0;
}

main {
  margin-top: 20px;
}

.content-wrapper {
  display: flex;
  gap: 20px;
}

.course-list,
.learning-progress,
.recommended-courses,
.coding-problems-entry {
  background-color: #f0f8ff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.course-list {
  flex: 2;
}

.learning-progress {
  flex: 1;
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grid-item {
  background-color: white;
  border-radius: 4px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s ease;
}

.grid-item:hover {
  background-color: #e6f2ff;
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.item-info h3 {
  margin-bottom: 5px;
}

.item-info p {
  color: #666;
  font-size: 0.9em;
}

.progress-bar {
  background-color: #e0e0e0;
  border-radius: 10px;
  height: 10px;
  width: 100%;
  overflow: hidden;
}

.progress {
  background-color: #1e90ff;
  height: 100%;
  transition: width 0.5s ease-in-out;
}

.course-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 10px;
}

.course-progress span {
  font-size: 0.8em;
  color: #666;
  margin-top: 5px;
}

.progress-info {
  margin-bottom: 15px;
}

.progress-number {
  font-size: 1.5em;
  font-weight: bold;
  color: #1e90ff;
}

.average-progress {
  display: flex;
  align-items: center;
}

.average-progress .progress-bar {
  flex: 1;
  margin-right: 10px;
}

.recommended-courses {
  margin-top: 20px;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 15px;
}

.recommended-course {
  background-color: white;
  border-radius: 4px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.recommended-course:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.recommended-course h3 {
  margin-bottom: 5px;
}

.recommended-course p {
  color: #666;
  font-size: 0.9em;
}

.login-button {
  background-color: white;
  color: #1e90ff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.login-button:hover {
  background-color: #f0f0f0;
}

.coding-problems-entry {
  cursor: pointer;
  transition: all 0.3s ease;
}

.coding-problems-entry:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
  }

  .grid-layout {
    grid-template-columns: 1fr;
  }

  .course-grid {
    grid-template-columns: 1fr;
  }

  header {
    flex-direction: column;
    gap: 10px;
  }

  .login-button {
    width: 100%;
  }
}
</style>
